<template>
	<div>
		<div class="outDiv">

			<div>
				<Header aa="../teachers/teaindex" contentTitle="活动礼包"></Header>
				<!-- <scroller lock-x :on-refresh="refresh" :on-infinite="infinite" style='top: 0.88rem;'> -->
				<scroller ref='scrollerBottom' style="top: 0.88rem;" :on-refresh="refresh" :on-infinite="infinite" refresh-layer-color="#4b8bf4"
			 loading-layer-color="#71bd36">
						<svg class="spinner" style="stroke: #4b8bf4;" slot="refresh-spinner" viewBox="0 0 64 64">
						<g stroke-width="7" stroke-linecap="round">
							<line x1="10" x2="10" y1="27.3836" y2="36.4931">
								<animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate>
								<animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate>
								<animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate>
							</line>
							<line x1="24" x2="24" y1="18.6164" y2="45.3836">
								<animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate>
								<animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate>
								<animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate>
							</line>
							<line x1="38" x2="38" y1="16.1233" y2="47.8767">
								<animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate>
								<animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate>
								<animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate>
							</line>
							<line x1="52" x2="52" y1="16" y2="48">
								<animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate>
								<animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate>
								<animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate>
							</line>
						</g>
					</svg>
					<div class="mainDiv">
						<div class="title">
							<div class="choType" @click="handleClickPopup">
								<span>{{ choType }}</span>
								<img src="~/static/images/icon_arrows_down_40.png">
							</div>
							<div class="describe">请点击“激活”生成活动口令，然后分享口令给他人使用~</div>
						</div>
						<ul class="card_list">
							<li class="card_item" v-for="(item, index) of activateList" :key="index">
								<div :class="['item_msg', item.is_generated == 0 ? 'activate' : 'notActivate']">
									<div class="msg_title" @click.stop="showName(item.name)">
										<div class="actType">{{ item.name }}</div>
										<div class="typeBtn" v-if="item.is_generated == 0" @click.stop="handleActivateClick('activate', item)">
											<img src="~/static/images/icon_activate.png">
											<span>激活</span>
										</div>
										<div class="typeBtn" v-else @click.stop="handleActivateClick('notActivate', item)">复制口令</div>
									</div>
									<div class="msg_detail">
										<div class="line_1">{{ item.vouchers_name.length > 1 ? (item.vouchers_name[0] + '及更多') :item.vouchers_name[0]}}</div>
										<!-- <div class="line_1">剩余次数 {{ item.remaining_count }} 次</div> -->
										<div class="line_2">
											<div class="left">截止时间 {{ item.expired_at.slice(0, 10) }}</div>
											<div class="right" @click="toggleDetailShow(index)">
												<span>查看详情</span>
												<img src="~/static/images/icon_arrows_up.png" v-if="detailShow == index">
												<img src="~/static/images/icon_arrows_down.png" v-else>
											</div>
										</div>
									</div>
								</div>
								<div class="item_detail" v-show="detailShow == index">
									<ul class="detail_list">
										<li>该优惠口令包含：</li>
										<li v-for="(n, m) of item.vouchers_name" :key="m">{{ n }}</li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
					<div style="width: 7.5rem;height: 0.5rem;"></div>
				</scroller>
			</div>


			<div class="dialog" v-show="showToast">
				<div class="block">
					<h2 class="title">{{ confirmText }}</h2>
					<input id="foo" type="text" v-model="inputValue" readonly />
					<p class="describe">点击确定，口令自动复制到手机剪切板</p>
					<div class="btn" data-clipboard-target="#foo" :data-clipboard-text="inputValue" @click="copy">
						确定
					</div>
				</div>
			</div>

			<TypePopup :popupShow="popupShow" @handleHidePopup="handleHidePopup" @hasChoType="hasChoType"></TypePopup>

		</div>
	</div>
</template>

<script>
	import {
		format
	} from '~/plugins/filter';
	import Header from '~/components/Header_act'
	import TypePopup from '~/components/TypePopup'
	import axios3 from '~/plugins/axios3';
	import ls from 'store2'

	import Clipboard from "clipboard";

	export default {
		components: {
			Header,
			TypePopup,
		},
		data() {
			return {
				userData: ls.get('userData'),
				isShow: false,
				detailShow: null,
				showToast: false, // 是否显示弹出框
				confirmText: '活动激活成功',
				inputValue: '',
				choType: '全部',
				popupShow: false,
				searchType: 'all',
				activateList: [],
				listData: [],
				pagination: {
					page: 1,
					pageSize: 10
				}
			}
		},
		mounted() {
			this.getGiftLists();
		},
		methods: {
			toggleDetailShow(index) { // 因为是遍历，所以该方法还是需要进行修改
				if (!this.isShow) {
					this.detailShow = index;
				} else {
					this.detailShow = null;
				}
				this.isShow = !this.isShow;
			},
			copy() {
				this.showToast = false;
				var clipboard = new Clipboard('.btn');
				clipboard.on('success', function(e) {
					e.clearSelection();
				})
				clipboard.on('error', function(e) {
					console.log('sorry')
				})

			},
			handleActivateClick(type, data) {
			console.log('data',data)
				if (type == 'activate') {
					this.confirmText = '活动激活成功';
					axios3.post('/teacher/argot', {
						voucher_group_id: data.id,
						salesman_id: this.userData.userVoId,
						salesman_telephone: this.userData.account
					}).then(res => {
						if (res.code == 200) {
							this.showToast = true;
							this.inputValue = res.data.argot_code;
							data.is_generated = 1;
							// this.pagination.page = 1;
							// this.activateList = [];
							// this.getGiftLists();
						} else {
							this.$vux.toast.text('激活失败！');
						}
					}).catch((error) => {
						this.$vux.toast.text(error.response.data.message)
					})

				} else {
					this.confirmText = '活动复制成功';
					this.showToast = true;
					this.inputValue = data.argots[0].argot_code;
				}
			},
			handleClickPopup() {
				this.popupShow = true;

			},
			handleHidePopup() {
				this.popupShow = false;
			},
			hasChoType(data) {
				this.choType = data;
				this.popupShow = false;
				if (data == '全部') {
					this.searchType = 'all';
				} else if (data == '未过期') {
					this.searchType = 0;
				} else {
					this.searchType = 1;
				}
				this.activateList = [];
				this.pagination.page = 1;
				this.onFetching = false
				this.getGiftLists();
			},
			getGiftLists() {
				axios3.post('/teacher/argot/voucher/group?page=' + this.pagination.page, {
					salesman_telephone: this.userData.account,
					search: {
						is_expired: this.searchType
					},
					page_size: this.pagination.pageSize,
				}).then(res => {
					if (res.code == 200) {
						this.listData = res.data.data;
						this.listData.forEach(item => {
							if (this.activateList.indexOf(item) == -1) {
								this.activateList.push(item);
							}
						})
					}
					this.onFetching = false
				}).catch((error) => {

					this.$vux.toast.text(error);
				})
			},
	
			infinite(done) {
				console.log('this.onFetching', this.onFetching)
				if (this.onFetching) {
					// do nothing
					if (this.listData.length === 0) {
						setTimeout(() => {
							done(true)
						}, 50)
						return;
					}

				} else {
					this.onFetching = true
					setTimeout(() => {

						if (this.listData.length === 0) {
							setTimeout(() => {
								done(true)
							}, 50)
							return;
						}

						this.$nextTick(() => {
							this.pagination.page += 1
							this.getGiftLists()

							setTimeout(() => {
								this.onFetching = false
								done()
							})

						})
						// this.onFetching = false
					}, 1000)
				}

			},

			refresh(done) {
				setTimeout(() => {
					// this.activateList = [];
					// this.pagination.page = 1;
					// this.getGiftLists()
					done()
				},2000)
			},

			showName(name) {
				this.$vux.toast.text(name);
			},

		}
	}
</script>

<style lang="less">
	.outDiv {
		width: 100%;
		height: 100vh;
		background: #fff;
		position: relative;

		.mainDiv {
			padding: 0 0.32rem;
			width: 100%;

			.title {
				margin: 0.4rem 0;

				.choType {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					span {
						font-size: 0.3rem;
						color: #222;
						font-weight: bold;
						margin-right: 0.08rem;
					}


					img {
						width: 0.4rem;
						height: 0.4rem;
					}

				}

				.describe {
					margin-top: 0.18rem;
					color: #999;
					font-size: 0.26rem;
					line-height: 0.37rem;
				}

			}

			.card_list {
				list-style: none;
				padding-left: 0;

				.card_item {
					width: 100%;
					margin-bottom: 0.4rem;


					.item_msg {
						width: 100%;
						// height: 2.83rem;
						border-radius: 0.1rem;
						padding: 0.32rem;
						padding-right: 0;

						.msg_title {
							display: flex;
							justify-content: space-between;
							margin-bottom: 0.08rem;

							.actType {
								color: #fff;
								font-size: 0.4rem;
								font-weight: bold;
								line-height: 0.8rem;
								max-width: 4rem;
								letter-spacing: 2px;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-box-orient: vertical;
								display: -webkit-box;
								-webkit-line-clamp: 1;
							}

							.typeBtn {
								width: 1.6rem;
								height: 0.8rem;
								border-radius: 1rem 0 0 1rem;
							}

						}

						.msg_detail {
							color: #fff;
							font-size: 0.24rem;
							line-height: 0.33rem;

							.line_1 {
								margin-bottom: 0.16rem;
							}

							.line_2 {
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding-right: 0.32rem;

								.right {
									display: flex;
									justify-content: flex-start;
									align-items: center;

									img {
										width: 0.32rem;
										height: 0.32rem;
									}
								}

							}
						}

					}

					.activate {
						background: linear-gradient(90deg, #409EFF 0%, #4087FF 100%);

						.msg_title {
							.typeBtn {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								padding-left: 0.4rem;
								background: #FFBD3F;

								img {
									width: 0.4rem;
									height: 0.4rem;
								}

								span {
									color: #fff;
									font-size: 0.28rem;
									line-height: 0.4rem;
									margin-left: 0.08rem;
								}
							}
						}
					}

					.notActivate {
						background: linear-gradient(90deg, #9692AF 0%, #4D4B70 100%);

						.msg_title {
							.typeBtn {
								background: #E5E8ED;
								line-height: 0.8rem;
								color: #535175;
								font-size: 0.28rem;
								text-align: center;
							}
						}
					}

					.item_detail {
						width: 100%;
						padding: 0.24rem 0.32rem;
						border-radius: 0.1rem;
						background: #fff;
						box-shadow: 0 0.02rem 0.1rem 0 rgba(153, 153, 153, 0.2);

						.detail_list {
							list-style: none;
							padding-left: 0;

							li {
								color: #999;
								font-size: 0.24rem;
								line-height: 0.33rem;
								margin-bottom: 0.08rem;
							}

							li:last-child {
								margin-bottom: 0;
							}

						}
					}

				}

			}

			.clickYes {
				color: #999;
				font-size: 0.26rem;
				line-height: 0.37rem;
			}


		}

		.dialog {
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.3);
			z-index: 1000;
			width: 100%;
			height: 100%;

			.block {
				background: #fff;
				width: 5.44rem;
				height: 4.64rem;
				position: absolute;
				top: 28%;
				left: 14%;
				border-radius: 0.14rem;
				padding-top: 0.56rem;
				text-align: center;


				.title {
					color: #222;
					font-size: 0.36rem;
					line-height: 0.5rem;
					font-weight: bold;
					margin-bottom: 0.32rem;
				}

				#foo {
					width: 4.8rem;
					height: 1.04rem;
					border-radius: 0.52rem;
					border: none;
					outline: none;
					background: #FAFAFA;
					font-size: 0.3rem;
					font-weight: bold;
					color: #409EFF;
					text-align: center;
				}

				.describe {
					color: #999;
					font-size: 0.26rem;
					line-height: 0.37rem;
					margin-top: 0.32rem;
					margin-bottom: 0.55rem;
				}

				.btn {
					height: 0.97rem;
					line-height: 0.97rem;
					color: #409EFF;
					font-size: 0.3rem;
					border-top: 1px solid #E5E8ED;
				}

			}
		}

	}
</style>
